<template>
  <div class="page">
    <div class="dataInfo">
      <h3>基础信息：</h3>
      <div style="position: relative">
        <p>
          姓名：<span>{{ xingming }}</span>
        </p>
        <p>
          性别：<span>{{ xingbie }}</span>
        </p>
        <p v-if="type === '2'">
          班级：<span>{{ banji }}</span>
        </p>
        <p v-if="type === '2'">
          学号：<span>{{ xuehao }}</span>
        </p>
        <p>
          电话：<span>{{ dianhua }}</span>
        </p>
        <el-button
          type="primary"
          size="mini"
          style="position: absolute; top: 0; left: 30%"
          @click="edit"
          >编辑</el-button
        >
      </div>
    </div>
    <div class="accountInfo">
      <h3>账户信息：</h3>
      <div>
        <p>
          账号：<span>{{ xuehao }}</span>
        </p>
        <p style="margin-top: 20px">
          <el-button type="primary" size="mini" @click="editAccount"
            >修改账户</el-button
          >
          <el-button type="primary" size="mini" @click="editPassword"
            >修改密码</el-button
          >
        </p>
      </div>
    </div>
    <editInfo ref="dataInfo" :formLabelAlign="formLabelAlign" />
    <editaccount ref="editaccount" @changeAccount="changeAccount" />
    <editpassword ref="editpassword" />
  </div>
</template>

<script>
import editInfo from "../components/editInfo";
import editaccount from "../components/editaccount";
import editpassword from "../components/editpassword";
import axios from "axios";
import { mapState } from "vuex";
export default {
  components: {
    editInfo,
    editaccount,
    editpassword,
  },
  data() {
    return {
      xingming: "张三",
      xingbie: "张三",
      banji: "张三",
      xuehao: "张三",
      dianhua: "张三",
      formLabelAlign: {
        name: "",
        sex: "",
        class: "一班",
        //studentId: "",
        phone: "",
      },
    };
  },
  computed: mapState({
    type(state) {
      return state.app.type;
    },
  }),

  created() {
    this.postAxios();
  },
  methods: {
    postAxios: function () {
      let ind = localStorage.getItem("lx");
      console.log("ind", ind);
      let studentid = localStorage.getItem("yh");
      if (ind == "1") {
        //教师
        console.log("studentid", studentid);
        axios
          .post("/api/user/showtabletea", {})
          .then((response) => {
            //这里进行过滤，只保留当前登陆学生的信息，其他过滤
            //filter 返回true表示保留该元素（通过测试），false则不保留
            var newArr = response.data.filter((item) => {
              if (studentid === item.teacherid) {
                return true;
              }
            });
            console.log(newArr);
            this.formLabelAlign.name = newArr[0].name;
            this.formLabelAlign.sex = newArr[0].sex;
            this.formLabelAlign.phone = newArr[0].telephone;
            this.xingming = newArr[0].name;
            this.xingbie = newArr[0].sex;
            // this.banji = newArr[0].nation;
            // this.xuehao = newArr[0].studentid;
            this.dianhua = newArr[0].telephone;
            this.xuehao = newArr[0].teacherid;
            //stu_info = this.stus = newArr;
            //console.log('姓名:  '+this.stus[0].name);
          })
          .catch((error) => {
            console.log(error);
          });
      } else if (ind == "2") {
        //学生
        let studentid = localStorage.getItem("yh");
        //console.log(studentid);//这里进行传递参数的取得值
        axios
          .post("/api/user/showtable", {})
          .then((response) => {
            //这里进行过滤，只保留当前登陆学生的信息，其他过滤
            //filter 返回true表示保留该元素（通过测试），false则不保留
            var newArr = response.data.filter((item) => {
              if (studentid === item.studentid) {
                return true;
              }
            });
            console.log(newArr);
            this.xingming = newArr[0].name;
            this.xingbie = newArr[0].sexual;
            this.banji = newArr[0].nation;
            this.xuehao = newArr[0].studentid;
            this.dianhua = newArr[0].telephone;
            this.formLabelAlign.name = newArr[0].name;
            this.formLabelAlign.sex = newArr[0].sex;
            this.formLabelAlign.class = newArr[0].nation;
            this.formLabelAlign.phone = newArr[0].telephone;

            //stu_info = this.stus = newArr;
            //console.log('姓名:  '+this.stus[0].name);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    edit() {
      this.$refs.dataInfo.openDialog();
    },
    // 修改账号
    editAccount() {
      this.$refs.editaccount.openDialog();
    },
    // 修改密码
    editPassword() {
      this.$refs.editpassword.openDialog();
    },
    changeAccount(newArr) {
      let ind = localStorage.getItem("lx");
      if (ind === "1") {
        this.xingming = newArr[0].name;
        this.xingbie = newArr[0].subject;
        // this.banji = newArr[0].nation;
        // this.xuehao = newArr[0].studentid;
        this.dianhua = newArr[0].telephone;
        this.xuehao = newArr[0].teacherid;
      } else if (ind === "2") {
        this.xingming = newArr[0].name;
        this.xingbie = newArr[0].sexual;
        this.banji = newArr[0].nation;
        this.xuehao = newArr[0].studentid;
        this.dianhua = newArr[0].telephone;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  width: calc(100% - 246px);
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  background: url(~@/assets/images/矩形1拷贝3.png) no-repeat;
  background-size: 110% 100%;
  background-position: 80% 110%;
  .dataInfo,
  .accountInfo {
    // height: 45%;
    padding: 20px 40px;
    margin-bottom: 2%;
    background: rgba(255, 255, 255, 0.4);
    div {
      margin-top: 20px;
    }
    p {
      padding-bottom: 4px;
      text-indent: 2em;
    }
  }
}
</style>
